<template>
  <div class="page J-integral">
    <div class="J-nav pl line-bottom">
      <div class="fl">可用积分：{{cardShow.bonus}}</div>
      <router-link :to="'/integral/list?id='+$route.query.card_id" class="fr">积分记录</router-link>
    </div>
    <shop-info @on-shop-info="onshopinfo"></shop-info>
    <div class="weui-loadmore weui-loadmore_line" v-if="isData">
      <span class="weui-loadmore__tips" style="background-color:#f7f7f7">暂无数据</span>
    </div>
    <div class="flex-fixd line-top">
      <div class="weui-flex">
        <div class="weui-flex__item">
          <div class="cart-jf"> 总消费积分: {{Total.price}} 积分</div>
        </div>
        <div class="cart-btn-sumit" @click="sumitSelect">兑换</div>
      </div>
    </div>
  </div>
</template>
<script>
  const weui = require('weui')
  const config = require('~src/config')
  const util = require('~src/lib/util')
  import shopInfo from '~components/mixins/shopinfo.vue'
  import { mapGetters } from 'vuex'
  export default {
    name: 'integral',
    data () {
      return {
        isData: false,
        URL: config._API_,
        nopic: config._URL_ + '/static/images/nopic.png',
        info: [],
        pickerArr: []
      }
    },
    mounted () {
      var _this = this
      var cardId = _this.$route.query.card_id
      console.log(cardId)
      _this.$nextTick(function () {
        if (util.isEmptyObject(_this.integralList)) {
          _this.$store.dispatch('getIntegralList', cardId)
        }
        if (util.isEmptyObject(_this.cardShow)) {
          _this.$store.dispatch('getCardshow', cardId)
        }
      })
    },
    components: {
      shopInfo
    },
    computed: {
      ...mapGetters({
        integralList: 'getIntegralList',
        cardShow: 'getCardshow'
      }),
      Total: function () {
        // 计算总金额, 总数量
        var total = {
          price: 0,
          num: 0
        }
        if (this.integralList) {
          for (var i = 0; i < this.integralList.length; i++) {
            total.price += this.integralList[i].needBonus * this.integralList[i].itemAmount
            total.num += this.integralList[i].itemAmount
          }
        } else {
          this.isData = true
        }
        return total
      }
    },
    methods: {
      onshopinfo (val) {
        this.info = val
      },
      sumitSelect () {
        var _this = this
        if (_this.Total.num === 0) {
          _this.$store.dispatch('TOAST_SHOW', {content: '商品兑换数量不能为0', msg: true})
          return
        }
        if(_this.Total.price > _this.cardShow.bonus) {
          _this.$store.dispatch('TOAST_SHOW', {content: '积分不足', msg: true})
          return
        }
        _this.pickerArr = []
        _this.cardShow.gasstation_list.forEach(function (val) {
          _this.pickerArr.push({label: val.gsName, value: val.id})
        })
        weui.picker(_this.pickerArr, {
          onConfirm: function (result) {
            console.log(_this.info)
            return
            var from = {
              member_id: _this.cardShow.member_id, // 会员卡ID
              cart_id:_this.$route.query.card_id,
              gs_id: result[0], // 油站ID
              total_num: _this.Total.num, // 总数量
              total_bonus: _this.Total.price, // 总金额
              item: _this.info // 商品信息
            }
            _this.$store.dispatch('IntegralSubmit', from)
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .J-integral{
    .flex-fixd{
      position: fixed;
      bottom:0;
      left:0;
      right:0;
      .weui-flex{
        padding:0;
      }
      .cart-jf{
        padding:10px;
      }
      .cart-btn-sumit{
        background-color: #009900;
        padding:10px 20px;
        color:#fff;
      }
    }
  }
  .integral-list{
    .weui-flex{
      padding:10px;
      background-color:#fff;
      .cart{
        width:100px;
        .cart-input-number{
          width:87px;
          margin:14px auto 0;
        }
        .cart-input{
          display: inline-block;
          font-size:14px;
          width:40px;
          text-align: center;
          vertical-align: middle;
        }
        .cart-add,.cart-del{
          vertical-align: middle;
          display:inline-block;
          position: relative;
          width:18px;
          height:18px;
          text-align: center;
          &:before{
            width:18px;
            height:18px;
            line-height:18px;
            display:block;
          }
        }
        .cart-add{
          background-color:#00CC00;
          -weikit-radius:50%;
          border-radius:50%;
          &:before {
            content: '';
            width:10px;
            height: 2px;
            background-color:#fff;
            position: absolute;
            top:8px;
            left:50%;
            margin-left:-5px;
          }
          &:after {
            content: '';
            width:2px;
            height: 10px;
            background-color:#fff;
            position: absolute;
            top:4px;
            left:50%;
            margin-left:-1px;
          }
        }
        .cart-del{
          border:1px solid #eee;
          -weikit-radius:50%;
          border-radius:50%;
          &:before {
            content: '';
            width:10px;
            height: 2px;
            background-color:#333;
            position: absolute;
            top:8px;
            left:50%;
            margin-left:-5px;
          }
        }
      }
      .weui-flex__item{
        .name{
          margin-top:3px;
          font-size:14px;
        }
        .price{
          margin-left:15px;
        }
        .info{
          margin-top:3px;
          color:#00CC00
        }
      }
    }
    .img{
      width:60px;
      height:60px;
      margin-right:10px;
    }
  }
</style>
